<template>
  <div class="supplier-table">
    <el-table v-loading="loading" :data="supplierList" border style="width: 100%">
      <el-table-column prop="supplierId" label="供应商ID" align="center" width="80" />
      <el-table-column
        prop="supplierName"
        label="供应商名称"
        align="center"
        min-width="150"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="supplierCode"
        label="供应商编码"
        align="center"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="contactName"
        label="联系人"
        align="center"
        width="100"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="contactPhone"
        label="联系电话"
        align="center"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="contactEmail"
        label="邮箱"
        align="center"
        min-width="150"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="address"
        label="地址"
        align="center"
        min-width="200"
        :show-overflow-tooltip="true"
      />
      <el-table-column prop="status" label="状态" align="center" width="80">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusLabel(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            :icon="useRenderIcon(View)"
            @click="handleViewSupplier(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="total > 0"
      :current-page="queryParams.pageNum"
      :page-size="queryParams.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="pagination"
    />

    <el-empty v-else description="暂无相关供应商" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch, PropType } from "vue";
import { http } from "@/utils/http";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { View } from "@element-plus/icons-vue";
import { SupplierVO } from "@/types/attendance/supplier";
import { ResponseData } from "@/types/common/response";
import { ElMessageBox } from "element-plus";

interface QueryParams {
  projectId: number;
  pageNum: number;
  pageSize: number;
}

export default defineComponent({
  name: "ProjectSupplierTable",
  props: {
    projectId: {
      type: Number as PropType<number>,
      required: true
    }
  },
  setup(props) {
    const supplierList = ref<SupplierVO[]>([]);
    const loading = ref(false);
    const total = ref(0);
    const queryParams = ref<QueryParams>({
      projectId: props.projectId,
      pageNum: 1,
      pageSize: 10
    });

    // 监听projectId变化
    watch(
      () => props.projectId,
      newVal => {
        queryParams.value.projectId = newVal;
        getSupplierList();
      }
    );

    // 获取项目关联的供应商列表
    const getSupplierList = async () => {
      loading.value = true;
      try {
        const res = await http.get<
          any,
          ResponseData<{
            total: number;
            rows: SupplierVO[];
          }>
        >("/attendance/supplier/list/project", {
          params: {
            projectId: props.projectId,
            pageNum: queryParams.value.pageNum,
            pageSize: queryParams.value.pageSize
          }
        });

        supplierList.value = res.data.rows;
        total.value = res.data.total;
      } catch (error) {
        console.error("获取项目供应商列表失败", error);
      } finally {
        loading.value = false;
      }
    };

    // 获取状态标签类型
    const getStatusType = (status: string): "success" | "warning" | "info" | "danger" => {
      const map: Record<string, "success" | "warning" | "info" | "danger"> = {
        "0": "success", // 正常
        "1": "danger" // 禁用
      };
      return map[status] || "info";
    };

    // 获取状态标签文本
    const getStatusLabel = (status: string): string => {
      const map: Record<string, string> = {
        "0": "正常",
        "1": "禁用"
      };
      return map[status] || "未知状态";
    };

    // 查看供应商详情
    const handleViewSupplier = (row: SupplierVO) => {
      // 使用ElementUI的MessageBox展示供应商详情
      ElMessageBox.alert(
        `<div style="margin-bottom: 10px;"><strong>供应商ID：</strong>${row.supplierId}</div>
         <div style="margin-bottom: 10px;"><strong>供应商名称：</strong>${row.supplierName}</div>
         <div style="margin-bottom: 10px;"><strong>供应商编码：</strong>${row.supplierCode}</div>
         <div style="margin-bottom: 10px;"><strong>联系人：</strong>${row.contactName || "-"}</div>
         <div style="margin-bottom: 10px;"><strong>联系电话：</strong>${
           row.contactPhone || "-"
         }</div>
         <div style="margin-bottom: 10px;"><strong>电子邮箱：</strong>${
           row.contactEmail || "-"
         }</div>
         <div style="margin-bottom: 10px;"><strong>地址：</strong>${row.address || "-"}</div>
         <div style="margin-bottom: 10px;"><strong>状态：</strong>${getStatusLabel(
           row.status
         )}</div>
         <div style="margin-bottom: 10px;"><strong>创建时间：</strong>${row.createTime || "-"}</div>
         <div><strong>备注：</strong>${row.remark || "-"}</div>`,
        "供应商详情",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定"
        }
      );
    };

    // 页码改变
    const handleCurrentChange = (pageNum: number) => {
      queryParams.value.pageNum = pageNum;
      getSupplierList();
    };

    // 每页条数改变
    const handleSizeChange = (pageSize: number) => {
      queryParams.value.pageSize = pageSize;
      queryParams.value.pageNum = 1;
      getSupplierList();
    };

    onMounted(() => {
      getSupplierList();
    });

    return {
      supplierList,
      loading,
      total,
      queryParams,
      getStatusType,
      getStatusLabel,
      handleViewSupplier,
      handleCurrentChange,
      handleSizeChange,
      useRenderIcon,
      View
    };
  }
});
</script>

<style lang="scss" scoped>
.supplier-table {
  padding: 0;

  .pagination {
    margin-top: 15px;
    justify-content: flex-end;
  }
}
</style>
